<template>
  <view class="attendance-container">
    <!-- 顶部用户信息 -->
		<view class="header">
			<view class="user-info" @click="addCount">
				<image class="avatar" :src="info.avatar" mode="aspectFill"></image>
				<view class="user-details">
					<text class="username">{{info.username}}</text>
					<text class="greeting">{{mType=='AM'?'Good morning~':'Good afternoon~'}}</text>
				</view>
			</view>
			<view class="weather">
				<text class="period">{{mType}}</text>
				<image v-if="mType == 'AM'" class="weather-icon" src="/static/uniapp/am.png" mode="aspectFill">
				</image>
				<image v-else class="weather-icon" src="/static/uniapp/pm.png" mode="aspectFill"></image>
			</view>
		</view>

    <!-- 考勤管理 -->
    <view class="attendance-manage">
      <view class="attendance-card" @click="navigateManage">
        <image
          class="attendance-icon"
          src="/static/image/frame.png"
          mode="aspectFit"
        ></image>
        <text class="attendance-title">Attendance management</text>
      </view>
    </view>

    <!-- 申请记录 -->
    <view class="my-applications">
      <view class="section-header" @click="navigateToApplications">
        <view class="header-left">
          <text class="header-title">My application</text>
          <text class="badge">{{splength}}</text>
        </view>
        <view class="header-subtitle">
          <text>Applications that have not yet been reviewed</text>
        </view>
        <view class="header-right">
          <uv-icon name="arrow-right" color="#0E623D" bold size="19"></uv-icon>
        </view>
      </view>

			<!-- 申请记录列表 -->
			<view class="application-list">
				<view v-for="(item, index) in applications" :key="index" class="application-item"
					@click="viewApplication(item)">
					<view class="application-header">
						<text class="application-type">Leave application</text>
						<text class="application-date">{{ $timeFrom(item.created_at, 'yyyy-mm-dd hh:MM:ss') }}</text>
					</view>
					<view class="application-details">
						<div class="round"></div>
						<div class="status">{{
								item.status == 3 ? 'Agree' : item.status == 4 ?'Turn down':'To be reviewed' }}</div>
						<view class="detail-row">
							<!-- <view class="status-dot"></view> -->
							<text class="detail-label">Initiate :</text>
							<text class="detail-value">{{ $timeFrom(item.start_time, 'yyyy-mm-dd hh:MM:ss') }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">Finish :</text>
							<text class="detail-value">{{ $timeFrom(item.end_time, 'yyyy-mm-dd hh:MM:ss') }}</text>
						</view>
						<view class="detail-row">
							<text class="detail-label">Duration :</text>
							<text class="detail-value">{{ item.days }}</text>
						</view>
					</view>
				</view>
			</view>
    </view>
		<uv-load-more :status="loadingType" />
  </view>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { useUserinfoStore } from "@/store/info";
import { getreplacementList } from "@/api/approval"
import { getStatus } from '@/api/attendace'
export default {
  data() {
    return {
			splength: 0,
      isWork: true,
			mType: 'AM',
			page: 1,
			loadingType: '',
			applications: [],
      applicationList: [
      ],
    };
  },

  computed: {
    ...mapState(useUserinfoStore, ["info"]),
  },
  onShow(){
		this.getList()
		this.getStatusData()
  },
	created() {
		const now = new Date();
		const hour = now.getHours();
		if (hour < 12) {
			console.log("当前时间是上午");
			this.mType = 'AM'
		} else {
			console.log("当前时间是下午");
			this.mType = 'PM'
		}
	},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			this.getList();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			console.log('onReachBottom')
			this.getList("more");
		},
  methods: {
    addCount() {
      uni.$uv.route({
        type: "tab",
        url: "/pages/Mine/mine",
      });
    },
		getStatusData() {
			getStatus({}).then(res => {
				console.log('getStatus', res)
				this.isWork = !res.canAttendance
				this.canAttendanceMessage = res.canAttendanceMessage
				this.currentRule = res.current_rule
			})
		},
		async getList(type = 'refresh') {
			if (type === "refresh") {
				this.page = 1;
				this.applications = []
			} else if (this.loadingType === "nomore") {
				return;
			}
			this.loadingType = "loading";
			let apiData = {
				status: this.activeTab == 'toBeReviewed' ? 0 : -1,
				searchText: this.searchText,
				page: this.page,
				limit: 10,
			}
			console.log('getList', apiData)
			let { list, total } = await getreplacementList(apiData)
			if (list.length < 10) {
				if (type === "refresh") this.loadingType = "nodata";
				if (type === "more") this.loadingType = "nomore";
			}
			this.splength = total
			this.page++
			this.applications = type === "refresh" ? list : this.applications.concat(list);
		},
    navigateManage() {
      uni.navigateTo({
        url: "/pages/Home/attendanceManage",
      });
    },
    viewApplication(item) {
      uni.navigateTo({
        url: "/pages/Approval/approvalDetail?id=" + item.id,
      });
    },
    navigateToLeave() {
      uni.navigateTo({
        url: "/pages/Approval/leave",
      });
    },
    navigateToApplications() {
      uni.$uv.route({
        type: "tab",
        url: "/pages/Approval/approval",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* 顶部用户信息样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-bottom: 2rpx solid #f0f0f0;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.greeting {
  font-size: 28rpx;
  color: #006400;
}

.weather {
  display: flex;
  align-items: center;
}

.period {
  font-size: 28rpx;
  margin-right: 20rpx;
  color: #006400;
}

.weather-icon {
  width: 76rpx;
  height: 76rpx;
  border-radius: 50%;
}

/* 考勤管理样式 */
.attendance-manage {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  background-color: #f5f5f5;
}

.attendance-card {
  width: 94%;
  height: 200rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.attendance-icon {
  width: 100rpx;
  height: 100rpx;
}

.attendance-title {
  font-size: 26rpx;
  color: #475467;
  font-weight: 300;
}

/* 应用区域样式 */
.application-section {
  background-color: #fff;
  padding: 30rpx;
  margin: 20rpx 20rpx;
  border-radius: 20rpx;
}

.section-title {
  margin-bottom: 30rpx;
}

.title-text {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  display: block;
}

.subtitle-text {
  font-size: 26rpx;
  color: #666;
  margin-top: 10rpx;
  display: block;
}

.application-actions {
  display: flex;
  justify-content: space-between;
}

.action-card {
  flex: 1;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 10rpx 0 10rpx 10rpx;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  margin: 0 10rpx;
}

.action-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.action-text {
  font-size: 28rpx;
  color: #333;
}

/* 申请记录样式 */
.my-applications {
	background-color: #fff;
	margin: 0 20rpx 20rpx;
	border-radius: 20rpx;
}

.section-header {
  padding: 30rpx;
  border-bottom: 1px solid #eee;
  position: relative;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-title {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.badge {
  background-color: #006400;
  color: #fff;
  font-size: 24rpx;
  padding: 2rpx 16rpx;
  border-radius: 20rpx;
  margin-left: 10rpx;
}

.header-subtitle {
  font-size: 26rpx;
  color: #666;
  margin-top: 10rpx;
}

.header-right {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
}

.icon-right {
  font-size: 40rpx;
  color: #006400;
}

/* .application-list {
		padding: 0 30rpx;
	} */

.application-item {
  // padding: 0 80rpx;
  position: relative;
  /* border-bottom: 1px solid #eee; */
}

.application-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  padding: 20rpx 15rpx;
  background: linear-gradient(to right, #e8f7f1, #fff);
}

.application-type {
  font-size: 30rpx;
  color: #006400;
  font-weight: bold;
}

.application-date {
  font-size: 26rpx;
  color: #999;
}

.application-details {
  margin-left: 80rpx;
  position: relative;
  .round {
    width: 26rpx;
    height: 26rpx;
    border-radius: 50%;
    border: 4rpx solid #0e623d;
    position: absolute;
    left: -46rpx;
    top: 4rpx;
  }
	.status{
		height: 46rpx;
		line-height: 46rpx;
		width: 174rpx;
		text-align: center;
		background: #127F4E;
		border-radius: 25px;
		font-weight: 500;
		font-size: 10px;
		color: #FFFFFF;
		position: absolute;
		right: 24rpx;
		bottom: 24rpx;
	}
}

.detail-row {
  display: flex;
  align-items: center;
  padding-bottom: 15rpx;
}

.status-dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #006400;
  margin-right: 10rpx;
}

.detail-label {
  width: 140rpx;
  font-size: 28rpx;
  color: #666;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
}
</style>
